<template>
  <div class="el-three-list">
    <div
      class="three-item hover2"
      v-for="(item) in tableData"
      @click="handDetails(item.newsId,item)"
      :key="item.newsId"
    >
      <el-image class="three-img" :src="item._titleImg" fit="cover"></el-image>
      <div class="three-title">{{item.title}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
    },
    name: {
      type: String,
      default: '大赛详情-标题.png', //标题图标的文件名字
    },
    type: {
      type: Number,
      default: 1, //大标题 2中标题 3小标题
    },
  },
  data() {
    return {}
  },
  methods: {
    handDetails(id, item) {
      this.$emit('handDetails', id, item)
    },
  },
}
</script>
<style scoped lang="less">
.el-three-list {
  .w100;
  .flex-row;
  flex-wrap: wrap;
  justify-content: space-between;
  .three-item {
    background: #ffffff;
    box-shadow: 0 0 18px 0 rgba(18, 27, 83, 0.07);
    // margin-right: 10px;

    margin-bottom: 10px;
    border-radius: 6px;
    .three-img {
      width: 164px;
      height: 100px;
      border-radius: 6px 6px 0 0;
    }
    .three-title {
      color: #333;
      font-size: 18px;
      overflow: hidden;
      font-weight: bolder;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 151px;
      margin: 13px auto;
      margin-top: 10px;
    }
  }
}
</style>
